<template>
  <div>
    <mt-header fixed :title="selectTitle" style="background:#1d1d1d;color:#fff;">
      <div slot="left"><img src="../assets/left.png" alt="" @click="left()" style="width:.6rem;height: .6rem;" /></div>
      <div slot="right"><img src="../assets/right.png" alt="" @click="right()" style="width:.6rem;height: .6rem;" /></div>
    </mt-header>
    <div style="width:100%;height:40px;"></div>
    <applist></applist>
    <!-- 左滑 -->
    <div v-if="isleft" class="isleft">
      <!-- <div style="width: 100%;height:1rem;"></div> -->
      <div class="" style="width:70%;height: 100%;background:#414141;">
        <div class="isleft_text" style="">
          <div :class="isindex == index ? 'yesext' : ''" v-for="(item, index) in listheyue" :key="index" @click="onhe(item,index)">
            <p style="" @click="setTitle(item.title)">{{ item.title }}</p>
          </div>
        </div>
      </div>
      <div style="width:30%;height: 100%;opacity: 0.2;background: #000;" @click="leftfalse"></div>
    </div>
    <!-- 右滑 -->
    <div v-if="isright" class="isright">
      <div style="width:30%;height: 100%;opacity: 0;" @click="rightfalse"></div>
      <div class="right_text" style="width:70%;height:100%;background: #232323;opacity: .9;">
        <p>主菜单</p>
        <div @click="realname()">
          <img src="../assets/denglu.png" alt="" />
          <span>实名认证</span>
        </div>
        <div @click="optional()">
          <img src="../assets/shezhi.png" alt="" />
          <span>管理自选合约</span>
        </div>
        <div @click="mingxi()">
          <img src="../assets/zijinxq.png" alt="" />
          <span>资金详情</span>
        </div>
        <div @click="settled">
          <img src="../assets/jiesuan.png" alt="" />
          <span>结算单</span>
        </div>
        <div @click="gonggaolist()">
          <img src="../assets/zixuan.png" alt="" />
          <span>通知公告</span>
        </div>
        <div @click="changepwd">
          <img src="../assets/xiugai.png" alt="" />
          <span>修改密码</span>
        </div>
        <div @click="money">
          <img src="../assets/tianjia.png" alt="" />
          <span>充值提现</span>
        </div>
        <div @click="logout()">
          <img src="../assets/tuichu.png" alt="" />
          <span>退出交易账号</span>
        </div>
        <div @click="on()">
          <img src="../assets/guanyu.png" alt="" />
          <span>关于</span>
        </div>
      </div>
    </div>
    <div class="looding2" v-if="!loginbtn2">站点已关闭</div>
  </div>
</template>

<script>
import applist from '../components/commapp/applist';
import { mapState } from 'vuex';
export default {
  computed: mapState({
    loginbrn: state => state.loginbrn /* 推送数据 */,
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */
  }),
  data() {
    return {
      loginbtn2: true,
      isleft: false,
      isright: false,
      listheyue: [],
      isindex: -1,
      selectTitle: '',
      token: true,
      title: ''
    };
  },
  watch:{
    loginbrn(val) {
      if (val == false) {
        this.loginbtn2 = false;
        // this.$message.error('站点已关闭！');
      } else {
        this.loginbtn2 = true;
      }
    },
    symbol(val) {
      for (let i in val) {
        this.listheyue.push(val[i]);
      }
      this.selectTitle = this.listheyue[0].title;
      this.$store.commit('trade/setSymbos', this.listheyue[0]);
    }
  },
  components: { applist },
  mounted() {
    for (let i in this.symbol) {
      this.listheyue.push(this.symbol[i]);
    }
    if(this.listheyue[0] == undefined){
      this.selectTitle = '';
      this.listheyue = [];
      this.isindex = -1;
    }else{
      this.selectTitle = this.listheyue[0].title;
      this.isindex = 0;
    }
  },
  methods: {
    setTitle(title) {
      this.selectTitle = title;
      this.isleft = false;
    },
    right() {
      if (this.$svcInvoke.config._token) {
        this.isright = !this.isright;
      }else{
        if(localStorage.getItem('_token')){
          this.$svcInvoke.setConf("_token", localStorage.getItem('_token'));
          this.isright = !this.isright;
        }else{
          this.$layer.msg('登录查看更多！');
          return this.$router.push({ path: '/' });
        }
      }
    },
    rightfalse() {
      this.isright = false;
    },
    // 实名
    realname() {
      this.$router.push({ path: 'realname' });
    },
    /* 通知公告*/
    gonggaolist() {
      this.$router.push({ path: 'gonggao' });
    },
    changepwd() {
      this.$router.push({ path: 'loginpassword' });
    },
    money() {
      this.$router.push({ path: 'chongzhi' });
    },
    mingxi() {
      this.$router.push({ path: 'mingxi' });
    },
    settled() {
      this.$router.push({ path: 'settled' });
    },
    optional() {
      this.$router.push({ path: 'optional' });
    },
    on() {
      this.$router.push({ path: 'on' });
    },
    profit() {
      this.$router.push({ path: 'profit' });
    },
    login() {
      this.$svcInvoke.setConf('_token', '');
      this.$router.push({ path: '/' });
    },
    logout() {
      //退出登录
      this.$svcInvoke.setConf('_token', '');
      localStorage.removeItem('_token');
      this.$router.push({ path: '/' });
    },
    left() {
      this.isleft = !this.isleft;
    },
    leftfalse() {
      this.isleft = false;
    },
    onhe(item,index) {
      // console.log(item);

      this.isindex = index;
      this.$store.commit('trade/setSymbos', item);
      this.$store.commit('trade/select', item.symbols[0]);
    }
  }
};
</script>

<style scoped="scoped">
.looding2 {
  position: fixed;
  top: 0rem;
  left: 0rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  width: 100vw;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
}
.mint-header h1.mint-header-title {
  font-size: 0.45rem !important;
  font-weight: 600 !important;
}
.list_title {
  background: #414141 !important;
}

.column {
  color: #fff !important;
}

.isleft {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  /* padding: 0 .3rem; */
  box-sizing: border-box;
  letter-spacing: 3px;
  display: flex;
  justify-content: space-between;
}

.isright {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;

  z-index: 1;
  display: flex;
  justify-content: space-around;
}

.isleft > p {
  width: 100%;
  height: 0.8rem;
  color: #fff;
  line-height: 0.8rem;
  padding: 0 0.2rem;
  box-sizing: border-box;
  border-radius: 8px;
  border: 2px solid #333333;
}

.isleft_text {
  width: 100%;
  padding: 0 0.2rem;
  height: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  /* align-items: center; */
  line-height: 0.8rem;
  color: #fff;
  letter-spacing: 3px;
  box-sizing: border-box;
  justify-content: space-between;
  text-align: center;
  margin-top: 0.2rem;
  background: #414141;
}

.isleft_text > div {
  width: 48%;
  height: 100%;
  border: 2px solid #333;
  border-radius: 5px;
  margin-top: 0.5rem;
  font-size: 0.42rem;
  font-weight: bold;
}

.yesext {
  width: 40%;
  height: 100%;
  border: 2px solid #333;
  border-radius: 5px;
  margin-top: 0.5rem;
  color: #d36d17;
  font-weight: bold;
  font-size: 0.35rem;
}

.right_text > p {
  width: 100%;
  height: 1rem;
  /* background: #0029ff; */
  color: #fff;
  text-align: center;
  line-height: 1rem;
  letter-spacing: 1px;
  font-size: 0.4rem;
}

.right_text > div {
  width: 100%;
  height: 1rem;
  background: #323232;
  color: #fff;
  letter-spacing: 3px;
  font-size: 0.35rem;
  padding: 0.2rem 0;
  display: flex;
  align-items: center;
  padding: 0 0.1rem;
  box-sizing: border-box;
}

.right_text > div img {
  width: 0.6rem;
  height: 0.6rem;
  vertical-align: middle;
  margin: 0 0.2rem;
}
</style>
